<template>
  <div class="operation-record-page">
    <h2 class="page-title">操作记录</h2>

    <!-- 筛选区域 -->
    <div class="filter-bar">
      <el-form inline :model="filterForm" @submit.prevent>
        <el-form-item label="操作人：">
          <el-input
            v-model="filterForm.operator"
            placeholder="请输入操作人"
            clearable
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="年/月/日"
            end-placeholder="年/月/日"
            format="YYYY/MM/DD"
            value-format="YYYY/MM/DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作记录表格 -->
    <el-table
      :data="recordList"
      border
      stripe
      style="width: 100%; margin-top: 16px"
      :loading="isLoading"
    >
      <el-table-column prop="id" label="ID"  />
      <el-table-column prop="operator" label="操作人"   />
      <el-table-column prop="module" label="操作模块"   />
      <el-table-column prop="type" label="操作类型"  />
      <el-table-column prop="ip" label="IP地址"   />
      <el-table-column prop="recordTime" label="记录时间"   />
      <el-table-column label="操作"  >
        <template #default="scope">
          <el-button
            type="text"
            text-color="#409EFF"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pagination.pageSize"
        layout="prev, pager, next, jumper, ->, total"
        :total="pagination.total"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 筛选表单数据
const filterForm = reactive({
  operator: '',
  dateRange: []
})

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

// 表格数据 & 加载状态
const recordList = ref([])
const isLoading = ref(false)

// 模拟操作记录数据
const mockRecords = [
  {
    id: 1900,
    operator: '陈燕',
    module: '收银操作',
    type: '收款单查询',
    ip: '192.168.1.1',
    recordTime: '2020-06-20 15:30:20'
  },
  {
    id: 1900,
    operator: '陈燕',
    module: '收银操作',
    type: '新增产品',
    ip: '192.168.1.1',
    recordTime: '2020-06-20 15:30:20'
  },
  {
    id: 1900,
    operator: '陈燕',
    module: '收银操作',
    type: '门店期初',
    ip: '192.168.1.1',
    recordTime: '2020-06-20 15:30:20'
  },
  {
    id: 1900,
    operator: '张三',
    module: '收银操作',
    type: '收款单查询',
    ip: '192.168.1.1',
    recordTime: '2020-06-20 15:30:20'
  },
  {
    id: 1900,
    operator: '李四',
    module: '收银操作',
    type: '门店期初',
    ip: '192.168.1.1',
    recordTime: '2020-06-20 15:30:20'
  },
  {
    id: 1901,
    operator: '王五',
    module: '库存管理',
    type: '出库查询',
    ip: '192.168.1.2',
    recordTime: '2020-06-20 16:10:05'
  },
  {
    id: 1902,
    operator: '赵六',
    module: '会员管理',
    type: '新增会员',
    ip: '192.168.1.3',
    recordTime: '2020-06-20 17:20:30'
  }
]

// 页面加载时初始化数据
onMounted(() => {
  fetchRecords()
})

// 获取操作记录（模拟接口请求）
const fetchRecords = () => {
  isLoading.value = true
  // 模拟接口延迟
  setTimeout(() => {
    // 实际项目中：根据筛选条件+分页参数请求接口
    const filtered = mockRecords.filter(item => {
      // 操作人筛选
      if (filterForm.operator && !item.operator.includes(filterForm.operator)) {
        return false
      }
      // 日期范围筛选
      if (filterForm.dateRange.length) {
        const [start, end] = filterForm.dateRange
        const recordDate = item.recordTime.split(' ')[0]
        if (recordDate < start || recordDate > end) {
          return false
        }
      }
      return true
    })
    // 分页处理
    const startIndex = (pagination.currentPage - 1) * pagination.pageSize
    const endIndex = startIndex + pagination.pageSize
    recordList.value = filtered.slice(startIndex, endIndex)
    pagination.total = filtered.length
    isLoading.value = false
  }, 300)
}

// 查询操作
const handleQuery = () => {
  pagination.currentPage = 1
  fetchRecords()
  ElMessage.success('查询成功')
}

// 删除操作
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '此操作将永久删除该记录，是否继续？',
    '提示',
    {
      type: 'warning'
    }
  ).then(() => {
    // 模拟接口删除
    recordList.value = recordList.value.filter(item => item !== row)
    pagination.total--
    ElMessage.success('删除成功！')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 分页：每页条数改变
const handleSizeChange = (val) => {
  pagination.pageSize = val
  fetchRecords()
}

// 分页：当前页改变
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  fetchRecords()
}
</script>

<style scoped>
.operation-record-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.page-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.filter-bar {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 自定义删除按钮样式（匹配截图的浅蓝色文字） */
::v-deep .el-button--text {
  color: #409EFF !important;
}
</style>